<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/load.css" />
		<link rel="stylesheet" type="text/css" href="../commn/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="../Hui-iconfont/1.0.8/iconfont.css" />
		<style type="text/css">
			body {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				width: 100%;
			}
			
			.index {
				min-width: 240px;
			}
			
			.top {
				display: -webkit-box;
				color: white;
				height: 40px;
				line-height: 40px;
				font-size: 18px;
				font-weight: bold;
				text-indent: 1em;
				background-color: #0F88EB;
			}
			
			.photo {
				height: 160px;
				overflow: hidden;
			}
			
			.hot_content {
				font-size: 18px;
				font-weight: bold;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.hot_content>p {
				font-size: 12px;
				font-weight: normal;
				color: #C9C9C9;
			}
			
			.head_content {
				min-width: 240px;
				max-width: 640px;
				margin: 0px auto 50px auto;
			}
			
			.content {
				border: 1px solid #EEEEEE;
				padding: 20px;
			}
			
			.content>.content_header {
				display: -webkit-box;
			}
			
			.content_image {
				margin: 5px 10px;
				width: 50px;
				height: 50px;
				border-radius: 40px;
				border: 1px solid #eeeeee;
				overflow: hidden;
			}
			
			.content_image>img {
				width: 50px;
				height: 50px;
			}
			
			.content_from {
				height: 60px;
				line-height: 60px;
				-webkit-box-flex: 1;
				color: #C4C4C4;
			}
			
			.content_title {
				height: 30px;
				/*border: 1px solid;*/
				font-size: 16px;
				font-weight: bold;
				color: black;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.content_text {
				font-size: 14px;
				height: 65px;
				color: black;
				display: -webkit-box;
				word-break: break-word;
				overflow: hidden;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			
			.content_item {
				height: 30px;
				line-height: 30px;
				font-size: 12px;
				color: #C4C4C4;
				border-bottom: 1px solid #EEEEEE;
			}
			
			.weui-tabbar {
				height: 50px;
				position: fixed;
			}
			
			.swiper-slide>img {
				width: 100%;
				height: 160px;
			}
			
			.swiper-pagination-bullet {
				background-color: #0F88EB;
			}
			
			.what {
				background-color: white;
				position: fixed;
				color: #0F88EB;
				right: 5%;
				bottom: 15%;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 40px;
				border: 5px solid;
			}
		</style>
	</head>

	<body>
		<div class="index">
			<div class="top">发现</div>
			<div class="head_content">

				<div class="photo">
					<div class="swiper-container">
						<!-- Additional required wrapper -->
						<div class="swiper-wrapper">
							<!-- Slides -->
							<div class="swiper-slide"><img src="../common/img/1.png" @click="bo1()" /></div>
							<div class="swiper-slide"><img src="../common/img/2.png" @click="bo2()" /></div>
							<div class="swiper-slide"><img src="../common/img/3.jpg" @click="bo3()" /></div>
						</div>
						<!-- If we need pagination -->
						<div class="swiper-pagination"></div>
					</div>
				</div>
				<!--提问按钮-->
				<span @click="tiwen()">
					<div class="what">
						提问
					</div>
				</span>
				<div class="content">
					<div class="hot_content">
						热门内容
						<p>24小时内热门回答及文章</p>
					</div>
					<div class="csshub-loading-icon" v-if="isload"></div>
					<span @click="link(lee.id)" v-for="lee in message">
						<div class="content_title" v-html="lee.title"></div>
						<div class="content_text" v-html="lee.context"></div>
						<div class="content_item">
							<span v-html="lee.n_zan"></span>赞同 <span v-html="lee.n_ping"></span>评论<span style="margin-left: 20px;" v-html="lee.time"></span>
				</div>
				</span>

			</div>

		</div>

		<div class="weui-tabbar">
			<a href="../zhihu_home/home.html" class="weui-tabbar__item weui-bar__item--on">
				<!--<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>-->
				<div class="weui-tabbar__icon .Hui-iconfont-canshu">
					<i class="Hui-iconfont Hui-iconfont-canshu"></i>
				</div>
			</a>
			<a href="discovery.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon ">
					<i class="Hui-iconfont Hui-iconfont-yanjing" style="color: #0766C6;"></i>
				</div>
			</a>
			<a href="../zhihu_message/message_home.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-xiaoxi1"></i>
				</div>
			</a>
			<a href="../zhihu_more/more.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-menu"></i>
				</div>
			</a>
		</div>
		</div>
		<script src="../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var newVue = new Vue({
						el: "body",
						data: {
							message: [],
							isload: true
						},
						methods: {
							link: function(e) {
								location.href = "../zhihu_questions/questions.html?id=" + e;
							},
							bo1: function() {
								location.href = "../zhuhu_detail/detail.html?id=1";
							},
							bo2: function() {
								location.href = "../zhuhu_detail/detail.html?id=2";
							},
							bo3: function() {
								location.href = "../zhuhu_detail/detail.html?id=3";
							},
							tiwen: function() {
								tiwen()
					       		}
							}
						}) 
						var ss;
					var dd; $.ajax({
						type: 'get',
						//async:false,
						url: "http://v2.mashupcloud.cn/developer/auth.do",
						data: {
							appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
							appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'

						},
						success: function(json) {
							//		            console.log(json);
							ss = JSON.parse(json)[1];
							dd = JSON.parse(json)[2];
							console.log('获得token成功');
							$.ajax({
								type: 'get',
								url: "http://v2.mashupcloud.cn/SQL/sele_tie/",
								data: {
									appid: dd,
									token: ss,
									name: 'sele_tie',
								},
								success: function(json) {
									console.log(JSON.parse(json));
									newVue.message = JSON.parse(json)[2],
										newVue.isload = false
								},
								error: function(json) {
									console.log("err:" + json);
								}
							});
						},
						error: function(json) {
							console.log("err:" + json);
						}
					});
					newVue.$nextTick(function() {
						var swiper = new Swiper('.swiper-container', {
							pagination: '.swiper-pagination',
							paginationClickable: true,
							loop: true,
							autoplay: '3000'
						});
					})
					function tiwen(){
					var id = sessionStorage.getItem("id");
								if(id == null) {
									alert("需要登录才能进行相关操作")
									location.href = "../zhihu_index/index.html"
								} else {
									location.href = "../zhihu_question/question.html"
									
								}
					}
		</script>
		<!--<script>
			$(".swiper-container").swiper({
				loop: true,
				autoplay: 3000
			});
		</script>-->
	</body>

</html>